import { View, Button } from '@tarojs/components'
import { useState } from 'react'
import './index.scss'

type Flex = 'auto' | 'none'

function Array() {
  const arr = [5, 2, 3 , 1, 4]
  const [order,setOrder] = useState(false)
  const [grow,setGrow] = useState(0)
  const [shrink,setShrink] = useState(1)
  const [basis,setBasis] = useState(false)
  const [flex,setFlex] = useState<Flex>('none')
  const [self,setSelf] = useState(false)

  function sort() {
    if (order) {
      setOrder(false)
    } else {
      setOrder(true)
    }
  }
  
  function Grow() {
    if(grow === 0) {
      setGrow(1)
    } else if( grow === 1) {
      setGrow(0)
    }
  }

  function Shrink() {
    if (shrink === 1) {
      setShrink(2)
    } else if (shrink === 2) {
      setShrink(1)
    }
  }

  function Basis() {
    if(basis){
      setBasis(false)
    }else{
      setBasis(true)
    }
  }

  function adapt() {
    setFlex(flex === 'none' ? 'auto' : 'none')
  }

  function Self() {
    if (self) {
      setSelf(false)
    } else {
      setSelf(true)
    }
  }
  

  return(
    <View className='wrapper'>

      <View className='container'>
        {arr.map(item => (
          <View className='box' style={order ? {order:item} : 'null'}>{item}</View>
        ))}
      </View>
      <Button onClick={sort}>order排序</Button>

     <View className='container'>
        <View className='box'>0</View>
        <View className='box' style={{flexGrow:grow}}>{grow}</View>
        <View className='box'>0</View>
     </View>
      <Button onClick={Grow}>放大flex-grow,现在为: {grow}</Button>
      <View className='annotation'>flex-grow为 1 的时候分配剩余空间</View>

      <View className='container1'>
        <View className='box1'>1</View>
        <View className='box1' style={{ flexShrink: shrink }}>{shrink}</View>
        <View className='box1'>1</View>
        <View className='box1'>1</View>
      </View>
      <Button onClick={Shrink}>缩小flex-shrink: {shrink}</Button>
      <View className='annotation'>flex-shrink 都为 1 ，当空间不足时，都将等比例缩小</View>
      <View className='annotation'>某一个项目flex-shrink为2 ，其他都为 1  ，当空间不足时，2会比 1 小</View>

      <View className='container'>
        <View className='box'></View>
        <View className='box' style={ basis ? 'flexBasis:100px' : 'null'}></View>
        <View className='box'></View>
      </View>
      <Button onClick={Basis}>flex-basis设置占据固定空间 100px</Button>

      <View className='container'>
        <View className='box'></View>
        <View className='box' style={{flex:flex}}></View>
        <View className='box'></View>
      </View>
      <Button onClick={adapt}>flex属性</Button>
      <View className='annotation'>flex属性为 1 自适应分配剩余空间</View>
      
      <View className='container2'>
        <View className='box'></View>
        <View className='box' style={self ? 'alignSelf:flex-end' : 'null'}></View>
        <View className='box'></View>
      </View>
      <Button onClick={Self}>单独设置对齐方式align-self：flex-end</Button>
    </View>
    
  )
}

export default Array
